<template>
  <div id="form">
    <!--登录-->
    <el-card class="box-card" v-if="isShow">
      <h3>登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</h3>
    <el-form ref="onLoad_form" :model="onLoad_form" :rules="onLoad_rules" label-width="65px">
      <el-form-item label="用户名" prop="user_name">
        <el-input v-model="onLoad_form.user_name" size="small"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="user_password">
        <el-input type="password" v-model="onLoad_form.user_password" size="small"></el-input>
      </el-form-item>

      <el-button size="small" type="primary" @click="onSubmit">登录</el-button>
      <el-button size="small" @click="load_register">注册</el-button>

    </el-form>
    </el-card>

    <!--注册-->
    <el-card class="box-card" v-if="!isShow">
      <h3>注&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;册</h3>
      <el-form ref="register_form" :model="register_form" :rules="register_rules" label-width="65px">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="register_form.name" size="small"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password1">
          <el-input type="password" v-model="register_form.password1" size="small"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password2">
          <el-input type="password" v-model="register_form.password2" size="small"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="nick">
          <el-input type="password" v-model="register_form.nick" size="small"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="register_form.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>

        <el-button size="small" type="primary" @click="onRegister">提交</el-button>
        <el-button size="small" @click="load_register">取消</el-button>

      </el-form>
    </el-card>
  </div>
</template>

<script>
  import {login} from '@/api/user'
  import store from '@/vuex/store'
 export default {
   store, //注册store
  data () {
    return {
      isShow:true, //显示登录表单

      onLoad_form:{
        user_name:"",
        user_password:""
      },

      register_form:{
          name:"",
          password1:"",
          password2:"",
          nick:"",
          sex:"",
      },

      onLoad_rules:{
        user_name: [
          { required: true, message: '请输入用户名称', trigger: 'change' },
        ],
        user_password:[
          { required: true, message: '请输入密码', trigger: 'change' },
        ]
      },

      register_rules:{
        name:[{ required: true, message: '用户名不能为空', trigger: 'change' },],
        password1:[{ required: true, message: '密码不能为空', trigger: 'change' },],
        password2:[{ required: true, message: '密码不能为空', trigger: 'change' },],
        nick:[{ required: true, message: '昵称不能为空', trigger: 'change' },],
        sex:[{ required: true, message: '性别不能为空', trigger: 'change' },]
      }
    }
  },
  methods:{
    //登录
    onSubmit(){
      //校验数据
      this.$refs["onLoad_form"].validate((valid) => {
        if (valid) {
          //调用后台接口，提交用户的登录信息
          login(this.onLoad_form).then(res=>{
            if(res.code == 200){
              this.$store.commit("userMeg",res.data); //存储登录用户信息
              this.$router.push({ path: '/main' });
            }else{
              this.$message.error("用户名或密码错误");
            }
          });
        }
      });
    },

    //注册
    onRegister(){
      this.$refs["register_form"].validate((valid) => {
         if(valid){
           console.log(this.register_form)
         }
      });
    },

    //点击注册/取消
    load_register(){
        this.isShow = !this.isShow
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 #form{
   width: 380px;
   position: relative;
   left: 50%;
   margin-top: 80px;
   margin-left: -190px;
 }
</style>
